import React from 'react';
import { Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';

const getOption = data => {
    const option = {
        title: {
            text: '候选人/入职来源分布',
            x: 'left'
        },
        tooltip: {
            formatter: '{a}:{c}%'
        },
        legend: {
            top: 30,
            data: ['候选人来源分布', '入职来源分布']
        },
        grid: {
            top: 100,
            left: 20,
            right: 20,
            bottom: 30,
            containLabel: true
        },
        xAxis: {
            show: false,
            type: 'category'
        },
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 'auto'
                },
                splitNumber: 5
            },
            {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 'auto'
                },
                splitNumber: 5
            }
        ],
        series: [
            {
                name: '候选人来源分布',
                type: 'bar',
                barWidth: 20,
                data: data.map(item => ({
                    name: item.name,
                    value: item.candidateRate
                }))
            },
            {
                name: '入职来源分布',
                yAxisIndex: 1,
                type: 'line',
                data: data.map(item => ({
                    name: item.name,
                    value: item.entryRate
                }))
            }
        ]
    };
    return option;
};

const QdxlChart = ({ data }) => (
    <div>
        {!data || data.length === 0 ? (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: '127px 0' }} />
        ) : (
            <ReactEcharts option={getOption(data)} />
        )}
    </div>
);

export default QdxlChart;
